<template>
  <div class="menus-container">
    <el-card>
      <el-row>
        <el-col :offset="22">
          <el-button
            class="addBtn"
            size="mini"
            type="success"
            icon="el-icon-edit"
            @click="onEdit(null)"
          >添加菜单</el-button>
        </el-col>
      </el-row>
      <el-table :data="data" style="width: 100%">
        <el-table-column label="标题" width="280" align="left">
          <template slot slot-scope="{row: {title, level}}">
            <div :class="{level1: level === 1,level2: level === 2,level3: level === 3,}">
              <i class="el-icon-folder-opened" v-if="level === 1"></i>
              <i class="el-icon-tickets" v-if="level === 2"></i>
              <i class="el-icon-document-checked" v-if="level === 3"></i>
              <span>{{title}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="代码"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot slot-scope="{row}">
            <el-button type="success" icon="el-icon-check" circle @click="onEdit(row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="delCompnys(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="13" :visible.sync="dialogVisible" width="50%">
        <el-form
          ref="newFormRef"
          :model="options"
          label-width="150px"
          :rules="newFormRules"
          v-if="dialogVisible"
        >
          <el-form-item label="权限组名称">
            <el-radio-group v-model="options.is_point">
              <el-radio :label="false" :disabled="isEdit">菜单</el-radio>
              <el-radio :label="true" :disabled="isEdit">权限点</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限组名称">
            <el-select v-model="options.pid" placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.title"
                :value="item.id"
                :disabled="item.level === 1 && options.is_point"
                :class="{l1:item.level === 1,l2:item.level === 2,l3:item.level === 3 }"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="权限代码" prop="code">
            <el-input type="text" v-model="options.code"></el-input>
          </el-form-item>
          <el-form-item label="权限标题" prop="title">
            <el-input type="text" v-model="options.title"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getMenus, delMenus, addMenus, editOneMenus } from '@/api/menus.js'
export default {
  name: 'MenusContainer',
  data() {
    return {
      menuList: [],
      data: [],
      list: [],
      dialogVisible: null,
      options: {
        is_point: '',
        pid: '',
        code: '',
        title: ''
      },
      isEdit: null,
      newFormRules: {
        code: [{ required: true, message: '请输入权限代码', trigger: 'blur' }],
        title: [{ required: true, message: '请输入权限标题', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getMenusList()
  },
  methods: {
    // 获取菜单数据
    async getMenusList() {
      const { data } = await getMenus()
      this.changeData(data, 1)
      this.menuList = data
      this.data = this.arrangeData(this.menuList, [])
      this.list = [
        {
          title: '主导航',
          id: null,
          is_point: false,
          level: 0
        },
        ...this.data
      ]
    },
    // // 遍历渲染表格三级图标
    changeData(data, level) {
      data.forEach(item => {
        if (level === 1 && item.childs) {
          item.points = item.childs
        }
        item.level = level
        item.points && this.changeData(item.points, level + 1)
      })
    },
    /* 数据处理 */
    arrangeData(data, arr) {
      return data.reduce((preBack, item) => {
        if (item.level < 4) {
          let { id, title, level, is_point, code, pid } = item
          is_point = !!is_point
          preBack.push({ id, title, level, is_point, code, pid })
          item.points &&
            item.points.length &&
            this.arrangeData(item.points, preBack)
        }
        return preBack
      }, arr)
    },
    onEdit(val) {
      this.isEdit = !!val
      this.options = val
        ? JSON.parse(JSON.stringify(val))
        : {
            is_point: '',
            pid: '',
            code: '',
            title: ''
          }
      this.dialogVisible = true
    },

    async onSubmit() {
      try {
        this.isEdit
          ? await editOneMenus(this.options)
          : await addMenus(this.options)
        console.log('成功')
        this.getMenusList()
        this.dialogVisible = false
      } catch (error) {
        console.dir(error)
      }
    },

    // 删除菜单
    async delCompnys(id) {
      const confirmStr = await this.$confirm(
        '此操作将永久删除菜单, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmStr !== 'confirm') return
      try {
        await delMenus(id)
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.error('删除失败')
      }
      this.getMenusList()
    }
  }
}
</script>

<style lang='less' scoped>
.menus-container {
  .el-button--mini {
    padding: 10px 12px;
    margin-top: 25px;
  }
  .el-table {
    margin-top: 15px;
    /deep/ .el-table__cell {
      text-align: center;
    }
    /deep/.el-icon-arrow-right {
      display: none;
    }
  }
}

.level1,
.level2,
.level3 {
  text-align: left !important;
}
.level1 {
  padding-left: 20px;
}
.level2 {
  padding-left: 40px;
}
.level3 {
  padding-left: 70px;
}
.l1 {
  padding-left: 50px;
}
.l2 {
  padding-left: 70px;
}
.l3 {
  padding-left: 90px;
}
</style>
